<template>
  <div class="foot">
    <router-link class="click-router" to="/home">
      <i class="iconfont icon-shouye"></i>
      <span class="title">首页</span>
    </router-link>
    <router-link class="click-router" to="/sort">
      <i class="iconfont icon-fenlei"></i>
      <span class="title">分类</span>
    </router-link>
    <router-link class="click-router" to="/cart">
      <i class="iconfont icon-gouwuche"></i>
      <span class="title">购物车</span>
    </router-link>
    <router-link class="click-router" to="/my">
      <i class="iconfont icon-wodejuhuasuan"></i>
      <span class="title">我的</span>
    </router-link>
  </div>
</template>

<script>
/**
* descripe:页面底部
* date: 2019-
* author: yezhanxiang
*/
  export default {
    data () {
      return {
        activeName: 'homeCurrent'
      }
    },
    components: {

    },
    watch: {

    },
    created () {

    },
    methods: {
      navtion () {
        this.activeName = this.activeName === 'home' ? 'homeCurrent' : 'home'
      }
    }
  }
</script >

<style lang='stylus' scoped>
.foot
  display flex
  justify-content space-around
  border-top 1px solid #dfdfdf
  background-color: rgb(255, 255, 255);
  position fixed
  bottom 0rem
  z-index 2
  width 100%
  padding-top 0.05rem
  .click-router,.router-link-exact-activated,.router-link-activated
    color red
  .click-router
    color #909399
    display block
    display flex
    flex-direction column
    align-items center
    flex 1
    .iconfont 
      font-size 0.5rem
    .title
      margin-top 0.1rem
    &.router-link-active
      .iconfont,.title
        color rgb(250, 67, 106)

</style>
